<!-- <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>系统首页</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		body{
			font-family: "Microsoft YaHei";
			background: #fff;
		}
		h1,h2,h3,h4,h5,h6,b{
			font-weight: normal;
		}
		li{
			list-style: none;
		}
		a{
			text-decoration: none;
		}
		.must-h:before{
			content: "* ";
			color: red;
		}
		.main-title-h2-h{
			color: #999;
			margin-top: 14px;
			padding: 8px 40px;
			line-height: 25px;
			font-size: 18px;
			border-bottom: 1px solid #ececec;
		}
		.main-container-h{
			padding: 0 40px;
		}
		.title-h{
			border-left: 5px solid #1188f6;
			padding-left: 7px;
			margin-top: 30px;
			margin-bottom: 10px;
			line-height: 16px;
			color: #676a6c;
			font-size: 13px;
		}
		.form-row-h{
			margin-top: 20px;
			color: #333;
		}
		.label-required-h{
			width: 115px;
			text-align: right;
			height: 30px;
			line-height: 30px;
			margin: 0;
			padding: 0;
			font-size: 14px;
			color: #000;
			font-weight: 400;
		}
		.input-required-h{
			margin-left: 20px;
			width: 437px;
			font-size: 14px;
			color: #333;
			font-weight: 400;
			border: 1px solid #eee;
			height: 30px;
			padding: 0 10px;
		}
		.tips-h{
			font-size: 12px;
			color: #999;
		}
		/*----------------button公共部分----------------*/
		.form-btn-container-h{
			
		}
		.btn-h{
			box-sizing: border-box;
			height: 32px;
			min-width: 90px;
			font-size: 14px;
			display: inline-block;
			text-align: center;
			border-radius: 2px;
			border: none;
			line-height: 32px;
			outline: none;
			color: #fff;
			width: 90px;
			cursor: pointer;
		}
		.btn-success-h{
			background: #1E9FFF;
		}
		.btn-warning-h{
			background: #f0ad4e;
		}
		.btn-danger-h{
			background: #d9534f;
		}
		.btn-default-h{
			background: #fff;
			color: #333 !important;
			border: 1px solid #ddd !important;
		}
		/*-----------flex公共部分----------*/
		.flex-h{
			display: flex;
		}
		.flex-d-col-h{
			flex-direction: column;
		}
		.flex-ai-center-h{
			align-items: center;
		}
		/*----------------内边距外边距公共部分-----------------*/
		.pl-130-h{
			padding-left: 130px!important;
		}
		.pb-100-h{
			padding-bottom: 100px!important;
		}
		.pt-40-h{
			padding-top: 40px!important;
		}
		.mat-20-h{
			margin-top: 20px !important;
		}
		.mal-20-h{
			margin-left: 20px !important;
		}
		.mar-10-h{
			margin-right: 10px !important;
		}
		.mar-20-h{
			margin-right: 20px !important;
		}
	</style>
</head>
<body>
	<form method="post" action="" id="form1" >
	<div class="main-container-h">
		<div class="flex-h form-row-h">
			<label class="label-required-h must-h">分组名称:</label>
			<input type="text" name="group_name" class="input-required-h" placeholder="分组名称" required="required" />
		</div>
		<div class="flex-h form-row-h">
			<label class="label-required-h must-h">标签:</label>
			<input type="text" name="tag_name" class="input-required-h" placeholder="标签" required="required" />
		</div>
	</div>
	<div class="form-btn-container-h pl-130-h pb-100-h pt-40-h">
		<button class="btn-h btn-success-h mar-20-h" type="button" onclick="tijiao()">提交</button>
	</div>
	</form>
</body>
<script src="/layui/layui.js"></script>
<script src="/js/ajax.js"></script>
<script type="text/javascript">
	function tijiao(){
		$('.help-inline').remove();
		var cansv= true;
		$('#form1').find('input[type="text"]').filter('[required="required"]').each(function(){
			if($.trim($(this).val())==''){
				cansv = false;
				var ntip = $('<span class="help-inline" style="color:red">该项内容不能为空</span>');
				$(this).after(ntip.show());
				$(this).one('blur',function(){
		            ntip.remove();
		        });
			}
		});
		
		if(cansv){
			//$('#form1').submit();//验证成功进行表单提交
			var formData = $('#form1').serialize();	
			myAjaxPost(false, true, '', formData, function (resp) {
				if (resp.status == 'success') {
					tusi(resp.msg);
					setTimeout(function(){ 
						parent.layer.closeAll('iframe');
						parent.location.reload(); 
					},2000);
				}else{
					alert(resp.msg);
				}
			});
		}
		
	}
</script>
</html> -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>新建标签组</title>
	<link rel="stylesheet" href="/layui/css/layui.css">
	<style type="text/css">
		.importExcel_main_contaienr{
			width: 485px;
			margin: 0 auto;
			padding: 32px 32px 32px 0;
			background: #fff;
		}
		.importExcel_title{
			font-size: 17px;
			width: 100%;
			text-align: center;
			margin-top: 2px;
			font-weight: 600;
			line-height: 24px;
			letter-spacing: 1px;
			padding-left: 20px;
		}

		.importExcel_from_contaienr{
			margin-top: 24px;
		}
		.importExcel_button_container{
			display: flex;
			justify-content: space-between;
			padding-top: 10px;
			align-items: center;
		}
		.importExcel_button_container span{
			color: #777;
			font-size: 14px;
			cursor: pointer;
			margin-left: 32px;
		}
		.importExcel_button_content{
			display: flex;
			justify-content: flex-end;
			flex: 1;
			align-items: center;
		}
		.lable_list_container{
			position: relative;
		}
		.lable_list_container svg{
			width: 14px;
			height: 14px;
			position: absolute;
			right: -20px;
			top: 13px;
			cursor: pointer;
		}
		.add_lable_container{
			cursor: pointer;
			color: #1890ff;
			font-size: 14px;
		}
	</style>
</head>
<body>
	<form class="layui-form" action="" id="form1">
		<div class="importExcel_main_contaienr">
			 <h2 class="importExcel_title">编辑标签组</h2>
			 <div class="importExcel_from_contaienr">
			 	<div class="layui-form-item">
			 	  <label class="layui-form-label">标签组名称</label>
			 	  <div class="layui-input-block">
			 	        <input type="text" name="title" required  lay-verify="required" placeholder="请输入标签组名称" autocomplete="off" class="layui-input">
			 	  </div>
			 	</div>
			 	<div class="layui-form-item">
			 	  <label class="layui-form-label">标签名称</label>
			 	  <div class="layui-input-block">
			 	        <input type="text" name="title" required  lay-verify="required" placeholder="请输入标签名称" autocomplete="off" class="layui-input">
			 	  </div>
			 	</div>
			 	<!-- 循环 -->
			 	
			 	<!-- 添加 -->
			 	<div class="layui-form-item">
			 	  <label class="layui-form-label"> </label>
			 	  <div class="layui-input-block add_lable_container">
			 	  	<span>添加标签</span>
			 	  </div>
			 	</div>
			 </div>
			 <div class="layui-form-item importExcel_button_container">
			 	<!-- <span>删除标签组</span> -->
			 	<div class="importExcel_button_content">
			 		<!-- <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">取消</button> -->
			 		<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" onclick="sub()">确定</button>
			 	</div>
			 	
			 </div>
		</div>	
	</form>
	<script src="/layui/layui.js"></script>
	<script>

	//表单
	layui.use('form', function(){
	  var form = layui.form;
	  
	  //监听提交
	  form.on('submit(formDemo)', function(data){
	    layer.msg(JSON.stringify(data.field));
	    return false;
	  });

	});
	// 上传
	layui.use('upload', function(){
	  var upload = layui.upload;
	   
	  //执行实例
	  var uploadInst = upload.render({
	    elem: '#test1' //绑定元素
	    ,url: '/upload/' //上传接口
	    ,done: function(res){
	      //上传完毕回调
	    }
	    ,error: function(){
	      //请求异常回调
	    }
	  });
	});
	</script>
<script src="/cdn/jquery.js"></script>
<script src="/js/ajax.js"></script>
	<script type="text/javascript">
		$('body').on('click','.icon',function(e){
			console.log(this);
			$(this).parent().remove();
		})
		let $div = "<div class='layui-form-item lable_list_container'><label class='layui-form-label'></label><div class='layui-input-block'><input type='text' name='title' required lay-verify='required' placeholder='请输入标签名称' autocomplete='off' class='layui-input'></div><svg t='1605457092379' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='2982' width='50' height='50'><path d='M874.230791 149.769209a512 512 0 1 0 0 724.461582 512.884029 512.884029 0 0 0 0-724.461582z m-41.402014 683.059568a453.506763 453.506763 0 1 1 0-641.657554 454.317122 454.317122 0 0 1 0 641.657554z' fill='#acacac' p-id='2983'></path><path d='M758.791367 482.532374H265.576978a29.467626 29.467626 0 1 0 0 58.935252H758.791367a29.467626 29.467626 0 1 0 0-58.935252z' fill='#acacac' p-id='2984'></path></svg></div>"
		$('.add_lable_container').click(function(){
			$(this).parent().before($div);
		})
		function sub(){
			var formData = $('#form1').serialize();
			params = decodeURIComponent(formData,true);
			myAjaxPost(false, true, '', { params:params}, function (resp) {
				if (resp.status == 'success') {
					tusi(resp.msg);
					setTimeout(function(){ 
						parent.layer.closeAll('iframe');
						parent.location.reload(); 
					},2000);
				}else{
					alert(resp.msg);
				}
			})
		}
	</script>
</body>
</html>